﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Spread.Master" AutoEventWireup="true" CodeBehind="Overview.aspx.cs" Inherits="ControlExplorer.samples.ContextMenu.Overview" %>
<%@ Register Assembly="FarPoint.Web.Spread"
    Namespace="FarPoint.Web.Spread" TagPrefix="FarPoint" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
  <script type="text/javascript">
      if (window.addEventListener) {
          window.addEventListener("load", moreInit, false);
      }

    function moreInit() {
      var spread = document.getElementById("<%= FpSpread1.ClientID %>");
      if (spread.addEventListener) {
        spread.addEventListener("MenuItemClicked", spread_MenuItemClicked, false);
      }
      else {
        spread.onMenuItemClicked = spread_MenuItemClicked;
      }
    }

    function spread_MenuItemClicked(event) {
      var spread = document.getElementById("<%= FpSpread1.ClientID %>");
      var menuItem = event.SelectedItem;

      /*
      Here's how we get the itemText for each menuItem
      - menuItem.childNodes[0]: icon (set by ImageUrl)
      - menuItem.childNodes[1]: link element (<a> tag) -> menuItem.childNodes[1].childNodes[0].data: the itemText
    
      Since this structure is not publicly announced, to ensure the correct result user are supposed to be proficiently in using Firebug, or IE developer tool to figure out the details
      */
      var itemText = menuItem.childNodes[1].childNodes[0].data;
      switch (itemText) {
        // cell actions      
        case "复制":
          spread.Copy();
          break;
        case "粘帖":
          spread.Paste();
          break;
          // column actions      
      case "自适应宽度":
          spread.SizeToFit(spread.ActiveCol);
          break;
      case "设置列宽...":
          var newWidth = prompt("Please enter column width", spread.Columns(spread.GetActiveCol()).GetWidth());
          if (!isNaN(newWidth) && newWidth != null)
            spread.SetColWidth(spread.GetActiveCol(), newWidth);
          break;
          // row actions
      case "删除行":
          spread.Delete();
          break;
      case "滚动到顶部行":
          spread.ScrollTo(0, 0);
          break;
        default:
          return;
      }
      event.cancel = true; // skip posting back to server, since we handled all things from client side
    }
  </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <b>右键点击单元格、行头和列头显示上下文菜单。</b><br />
  <br />
  <FarPoint:FpSpread ID="FpSpread1" runat="server" BorderColor="Black" BorderStyle="Solid"
    BorderWidth="1px">
    <CommandBar BackColor="Control" ButtonFaceColor="Control" ButtonHighlightColor="ControlLightLight"
      ButtonShadowColor="ControlDark">
    </CommandBar>
    <Sheets>
      <FarPoint:SheetView SheetName="Sheet1">
      </FarPoint:SheetView>
    </Sheets>
    <ContextMenus>
      <FarPoint:ContextMenu Type="ColumnHeader">
        <Items>
          <FarPoint:MenuItem Text="列菜单" Enabled="false" />
          <FarPoint:MenuItem Text="自适应宽度" />
          <FarPoint:MenuItem Text="设置列宽..." />
        </Items>
      </FarPoint:ContextMenu>
      <FarPoint:ContextMenu Type="RowHeader">
        <Items>
          <FarPoint:MenuItem Text="行菜单" Enabled="false" />
          <FarPoint:MenuItem Text="删除行" />
          <FarPoint:MenuItem Text="滚动到顶部行" />
        </Items>
      </FarPoint:ContextMenu>
    </ContextMenus>
  </FarPoint:FpSpread>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ControlOptions" runat="server">
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="Description" runat="server">
    <p>
      现在，您可以使用上下文菜单特性来添加更多数据操作和 UI 交互到您的应用中。
    </p>
    <p>
      Spread 上下文菜单可以应用于表头(行头和列头)以及视图部分。
    </p>
</asp:Content>
